<template>
  <div class="wrap">
    <div class="card-table">
      <TableComponent :columns="contributionTableColumns" :data="tableData" :tableOption="tableOption" :stripe="stripe">
        <template slot="id" slot-scope="scopeTag">
          <el-tag v-show="scopeTag.scope.row.flag=='1'" type="success" size="mini">新</el-tag>
        </template>
        <template scope="scope">
          <el-button v-show="!scope.scope.row.show" @click="editRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
          <el-button v-show="!scope.scope.row.show" @click="delRow(scope.scope.row)" type="text" size="mini" :disabled="scope.scope.row.flag=='1'?false:true">删除</el-button>
        </template>
      </TableComponent>
    </div>
    <div class="add-form">
      <el-button type="text" @click="handleAdd">+新增</el-button>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisibleAdd" width="60%" :before-close="handleCancle">
      <div class="dialog-box">
        <el-form ref="form" id="warning" :show-message="false" :model="addForm" label-width="165px" :rules="rules" label-position="left" style="padding: 0 20px; margin-top: 20px">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="股东" prop="shareholder" style="margin-bottom: 16px; margin-left: -9px">
                <el-tooltip :content="addForm.shareholder" placement="top" effect="dark">
                  <el-input v-model="addForm.shareholder" size="small" :class="ifEdit? 'editClass':'seeClass'" disabled></el-input>
                </el-tooltip>
                <el-button v-if="ifEdit" type="text" size="mini" @click="handleShowDialog">选择</el-button>
              </el-form-item>
              <el-form-item label="业务日期" prop="buyTime" style="margin-bottom: 16px; margin-left: -9px">
                <div v-show="addFormFormal.buyTime!=null" class="warning-box-required"><p>{{`原值：${addFormFormal.buyTime}`}}</p></div>
                <el-date-picker :picker-options="pickerOptions" clearable class="select-item" style="width: calc(100% - 9px); margin-left: 9px" type="date" placeholder="选择日期" v-model="addForm.buyTime" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <el-form-item label="认缴注册资本额(原币)" prop="subscribeShareOc" style="margin-bottom: 16px; margin-left: -9px">
                <div v-show="addFormFormal.subscribeShareOc!=null" class="warning-box-required"><p>{{`原值：${addFormFormal.subscribeShareOc}`}}</p></div>
                <el-input v-model="addForm.subscribeShareOc" size="small" style="width: calc(100% - 9px); margin-left: 9px" clearable></el-input>
              </el-form-item>
              <el-form-item label="表决权份额" prop="voteShare" style="margin-bottom: 16px;">
                <div v-show="addFormFormal.voteShare!=null" class="warning-box"><p>{{`原值：${addFormFormal.voteShare}`}}</p></div>
                <el-input v-model="addForm.voteShare" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="实缴注册资本额(人民币)" prop="paidShareRmb" style="margin-bottom: 16px;">
                 <el-input v-model="addForm.paidShareRmb" size="small" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="委托人" prop="consignerName" style="margin-bottom: 16px">
                <div v-show="addFormFormal.consignerName!=null&&''" class="warning-box"><p>{{`原值：${addFormFormal.consignerName}`}}</p></div>
                <el-tooltip :content="addForm.consignerName" placement="top" effect="dark">
                  <el-input v-model="addForm.consignerName" size="small" disabled style="width: calc(100% - 39px)"></el-input>
                </el-tooltip>
                <el-button type="text" size="mini" @click="selectConsigner">选择</el-button>
                <i class="el-icon-circle-close" @click="clearValue" />
              </el-form-item>
              <el-form-item label="股东类别" prop="shareholderType" style="margin-bottom: 16px; margin-left: -9px">
                <div class="warning-box-required" v-for="item in shareTypeOption" :key="item.index">
                  <p>{{formate(addFormFormal.shareholderType, item.code, item.value)}}</p>
                </div>
                <el-select v-model="addForm.shareholderType" size="small" class="select-item" clearable style="width: calc(100% - 9px); margin-left: 9px">
                  <el-option
                    v-for="item in shareTypeOption"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="实缴注册资本额(原币)" prop="paidShareOc" style="margin-bottom: 16px;">
                <div v-show="addFormFormal.paidShareOc!=null" class="warning-box"><p>{{`原值：${addFormFormal.paidShareOc}`}}</p></div>
                <el-input v-model="addForm.paidShareOc" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item label="分红权份额" prop="dividendShare" style="margin-bottom: 16px;">
                <div v-show="addFormFormal.dividendShare!=null" class="warning-box"><p>{{`原值：${addFormFormal.dividendShare}`}}</p></div>
                <el-input v-model="addForm.dividendShare" size="small" clearable></el-input>
              </el-form-item>
              <el-form-item v-if="!ifEdit" label="退出日期" prop="exitDate" style="margin-bottom: 16px;">
                <div v-show="addFormFormal.exitDate!=null" class="warning-box"><p>{{`原值：${addFormFormal.exitDate}`}}</p></div>
                <el-date-picker clearable :picker-options="pickerOptions" class="select-item" type="date" placeholder="选择日期" v-model="addForm.exitDate" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('form')">确 定</el-button>
      </span>
    </el-dialog>
    <MemberAndCompany @sendData="getDialogData" :dialogData="dialogData" />
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table'
import { contributionTableColumns } from '../js/index.js'
import MemberAndCompany from './components/memberAndCompany.vue'
import { shareMsgOa, delOutMoney, editShareholder, addShareholder, managementOrg, getSingleOutMoney, queryALLBasicData } from '@/api/modules/propertyRight.js'
import { checkNumber } from '@/utils/pattern.js'
export default {
  components: {
    TableComponent,
    MemberAndCompany
  },
  data() {
    return {
      contributionTableColumns,
      tableData: [],
      tableOption: {
        isShowOperate: true,
        operateWidth: '100px',
        showTag: true
      },
      stripe: true,
      title: '',
      dialogVisibleAdd: false,
      addForm: {
        shareholder: '',
        paidShareOc: null,
        buyTime: '',
        voteShare: null,
        exitDate: '',
        consignerName: null,
        shareholderType: '',
        subscribeShareOc: null,
        paidShareRmb: null,
        dividendShare: null,
        shareholderId: '',
        consigner: '',
        isPerson: '',
        appointType: ''
      },
      addFormFormal: {},
      shareTypeOption: [],
      rules: {
        shareholder: [{ required: true, message: '请选择股东', trigger: 'change' }],
        buyTime: [{ required: true, message: '请选择业务日期', trigger: 'change' }],
        shareholderType: [{ required: true, message: '请选择股东类别', trigger: 'change' }],
        subscribeShareOc: [
          { required: true, message: '请输入认缴注册资本额(原币)', trigger: 'change' },
          { validator: checkNumber, trigger: 'change' },
        ],
        paidShareOc: [{ validator: checkNumber, trigger: 'change' }],
        voteShare: [{validator: checkNumber, trigger: 'change' }],
        paidShareRmb: [{validator: checkNumber, trigger: 'change' }],
        dividendShare: [{validator: checkNumber, trigger: 'change' }]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6 // 如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      ifEdit: true,
      // 选人/公司弹窗组件参数=============
      dialogData: {
        dialogVisible: false,
        shareTitle: ''
      },
      saveCompanyMsg: {
        resource: '',
        taskId: '',
        registerType: '',
        companyChiName: '',
        companyEngName: '',
        cmhkId: '',
        companyCode: '',
        registerName: '',
        editOrAdd: ''
      }
    }
  },
  methods: {
    // 格式化报警信息
    formate(text, code, value) {
      if (text == code) {
        return `原值：${value}`
      }
    },
    queryOutMoneyMethods(params) {
      this.saveCompanyMsg = params
      shareMsgOa(params).then(res => {
        if (res.data.code === '0') {
          const arr = res.data.body
          const obj = {
            shareholderBelong: '合计',
            subscribeOcPer: res.data.body.subPerOcTotal, // 出资比例
            subscribeShareOc: res.data.body.subscribeShareOcTotal, // 认缴注册资本额原币
            paidShareOc: res.data.body.paidShareOcTotal, // 实缴注册资本额（原币）
            paidShareRmb: res.data.body.paidShareRmbTotal, // 实缴注册资本额(renmb)
            voteShare: res.data.body.voteShareTotal, // 表决权份额
            dividendShare: res.data.body.dividendShareTotal, // 分红权份额
            show: true
          }
          arr.push(obj)
          this.tableData = arr
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleAdd() {
      this.title = '新增'
      this.dialogVisibleAdd = true
      this.ifEdit = true
      queryALLBasicData({tableName: 'company_shareholder', field: 'shareholder_Type'}).then(res => {
        this.shareTypeOption = res.data.body
      })
    },
    // 修改出资情况
    editRow(row) {
      this.dialogVisibleAdd = true
      this.ifEdit = false
      this.title = '修改'
      queryALLBasicData({tableName: 'company_shareholder', field: 'shareholder_Type'}).then(res => {
        this.shareTypeOption = res.data.body
      })
      const data = Object.assign({}, row, this.saveCompanyMsg)
      getSingleOutMoney(data).then(res => {
        if (res.data.code === '0') {
          this.addForm = res.data.body.temp
          this.addFormFormal = res.data.body.formal
        }
      })
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.addForm.csid = ''
            const obj = Object.assign(this.addForm, this.saveCompanyMsg)
            addShareholder(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('新增成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.queryOutMoneyMethods(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else if (this.title === '修改') {
            const obj = Object.assign(this.addForm, this.saveCompanyMsg)
            editShareholder(obj).then(res => {
              if (res.data.code === '0') {
                this.$message.success('修改成功')
                this.resetForm('form')
                this.dialogVisibleAdd = false
                this.queryOutMoneyMethods(this.saveCompanyMsg)
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
        } else {
          this.$message.error('请检查必填字段')
          return false
        }
      })
    },
    handleCancle() {
      this.resetForm('form')
      this.addFormFormal = {}
      this.dialogVisibleAdd = false
    },
    delRow(row) {
      const data = {
        taskId: row.taskId,
        cmhkId: row.cmhkId,
        shareholderId: row.shareholderId,
        shareCategoryName: row.shareCategoryName
      }
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOutMoney(data).then(res => {
          if (res.data.code === '0') {
            this.$message.success('删除成功')
            this.queryOutMoneyMethods(this.saveCompanyMsg)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clearValue() {
      this.addForm.consigner = ''
      this.addForm.consignerName = ''
    },
    // 点击选择显示选择股东弹窗
    handleShowDialog() {
      this.dialogData.dialogVisible = true
      this.dialogData.shareTitle = '股东'
    },
    selectConsigner() {
      this.dialogData.dialogVisible = true
      this.dialogData.shareTitle = '委托人'
    },
    getDialogData(data) {
      if (this.dialogData.shareTitle === '股东') {
        if (data.code === ''||data.value === '') {
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        } else {
          this.addForm.shareholder = data.value
          this.addForm.shareholderId = data.code
          this.addForm.isPerson = data.isPerson
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        }
      } else if (this.dialogData.shareTitle === '委托人') {
        if (data.code === ''||data.value === '') {
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        } else {
          this.addForm.consignerName = data.value
          this.addForm.consigner = data.code
          this.addForm.appointType = data.appointType
          this.dialogData.dialogVisible = false
          this.dialogData.shareTitle = ''
        }
      }
    },
    // 清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
  .wrap {
    .card-table {
      width: 100%;
    }
    .add-form {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .table-box {
      height: 50vh;
    }
    .select-item {
      width: 100%;
    }
    .editClass {
      width: calc(100% - 39px);
      margin-left: 9px;
    }
    .seeClass {
      width: calc(100% - 9px);
      margin-left: 9px;
    }
    .editClassNoStar {
      width: calc(100% - 30px);
    }
    .el-icon-circle-close {
      position: absolute;
      top: 10px;
      right: 45px;
      font-size: 14px;
      color: gray;
    }
    .warning-box {
      font-size: 12px;
      background-color: rgba(225, 101, 49, 0.2);
      border-radius: 3px;
      position: absolute;
      top: -17px;
      left: 0;
      z-index: 1;
      p {
        color: rgba(225, 101, 49);
      }
    }
    .warning-box-required {
      font-size: 12px;
      margin-left: 9px;
      background-color: rgba(225, 101, 49, 0.2);
      border-radius: 3px;
      position: absolute;
      top: -17px;
      left: 0;
      z-index: 1;
      p {
        color: rgba(225, 101, 49);
      }
    }
  }
</style>
<style>
  #warning .el-form-item__content {
    line-height: 17px;
    position: relative;
    font-size: 14px;
  }
</style>